import { ref } from 'vue'
import { defineStore } from 'pinia'

export const useTabsStore = defineStore(
	'tabs', // 这里是存储的关键字，可以在浏览器应用存储中看到
	() => {
		// 样例数据
		const tabsDemo = [
			{
				title: '主页',
				name: 'default',
				path: '/home/default',
			},
			{
				title: '书籍管理',
				name: 'books',
				path: '/home/books',
			},
			{
				title: '文件列表',
				name: 'files',
				path: '/home/files',
			},
			{
				title: '实时天气',
				name: 'weathers',
				path: '/home/weathers',
			},
			{
				title: '用户管理',
				name: 'users',
				path: '/home/users',
			},
			{
				title: '角色管理',
				name: 'roles',
				path: '/home/roles',
			},
			{
				title: '菜单管理',
				name: 'menus',
				path: '/home/menus',
			},
			{
				title: '系统设置',
				name: 'settings',
				path: '/home/settings',
			}
		]

		// 定义响应式对象,存放当前的菜单path
		const currentPath = ref('/home/default')
		// tab数组
		const tabs = ref([{
			title: '主页',
			name: 'default',
			path: '/home/default',
		}])
		// 被选中tab的name属性
		const selectTab = ref('default')

		// 恢复默认
		const resume = () => {
			// 恢复选中菜单为/home/default
			currentPath.value = '/home/default'
			// 恢复选中tab为default
			selectTab.value = 'default'
			// 恢复选中tab为default
			tabs.value = [{
				title: '主页',
				name: 'default',
				path: '/home/default'
			}]
		}

		return { currentPath, tabs, selectTab, resume }
	},
	{
		persist: {
			enabled: true,
			strategies: [
				{
					// 使用sessionStorage进行持久化，与登录凭证token保存方式一致
                    storage: sessionStorage // 其默认的存储方式也是sessionStorage
				}
			]
		}
	}
)